<template>
	<div>
		<div>v-force <input v-focus type="text" /></div>
		<div v-red>v-red</div>
		<div v-color:foo.bar="'blue'">v-color</div>
		<div v-highlight>vHighlight</div>
	</div>
</template>

<script setup lang="ts">
import type { Directive } from 'vue'
// 如果指令比较简单，可以直接定义一个函数，会在 mounted 和 updated 时调用
const vColor: Directive<HTMLElement, string> = (e, binding) => {
	e.style.color = binding.value
	console.log(binding)
	// binding = {
	//   arg: 'foo',
	//   modifiers: { bar: true },
	//   value: /* `blue` 的值 */,
	//   oldValue: /* 上一次更新时 `blue` 的值 */
	// }
}

const vHighlight = {
	mounted: (el: any) => {
		el.classList.add('is-highlight')
	},

	// 在绑定元素的 attribute 前
	// 或事件监听器应用前调用
	// created(el, binding, vnode) {
	// 	// 下面会介绍各个参数的细节
	// },
	// // 在元素被插入到 DOM 前调用
	// beforeMount(el, binding, vnode) {},
	// // 在绑定元素的父组件
	// // 及他自己的所有子节点都挂载完成后调用
	// mounted(el, binding, vnode) {},
	// // 绑定元素的父组件更新前调用
	// beforeUpdate(el, binding, vnode, prevVnode) {},
	// // 在绑定元素的父组件
	// // 及他自己的所有子节点都更新后调用
	// updated(el, binding, vnode, prevVnode) {},
	// // 绑定元素的父组件卸载前调用
	// beforeUnmount(el, binding, vnode) {},
	// // 绑定元素的父组件卸载后调用
	// unmounted(el, binding, vnode) {},
}
</script>

<style lang="sass" scoped></style>
